<template>
  <vab-card
    shadow="always"
    v-loading="loading"
  >
    <template #header>
      <span class="leve2_title">变更记录</span>
    </template>
    <template #default>
      <el-scrollbar height="200px">
        <aside v-if="logArray" v-loading="loading">
          <div class="flex log" v-for="(item, i) in logArray" :key="item.id">
            <span class="title ellipsis">{{ item.title }}</span>
            <div class="content flex">
              <span class="time">{{ item.created_at }}</span>
              <span class="text" v-html="item.remark"></span>
            </div>
          </div>
        </aside>
        <span v-else class="remark_text">暂无数据</span>
      </el-scrollbar> 
    </template>
  </vab-card>
</template>

<script setup lang="ts">
import { getCustomerPriceLog } from '~/src/api/dms/customer';

/**
 * @props 
 */
defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})
/**
 * @var
 */
const ruleForm = reactive({
  remark: '',
  log: [],
})

let logArray = reactive<any>([])
let loading = ref(false)

/**
 * @method
 */
const _getCustomerPriceLog = async (id = '') => {
  loading.value = true
  try {
    let res = await getCustomerPriceLog({ id })
    logArray = res.data.list
    loading.value = false
  } catch (error) {

  }
}

/**
 * @实例
 */
defineExpose({
  ruleForm,
  _getCustomerPriceLog
})
</script>

<style scoped lang="scss">
:deep() {
  .el-loading-spinner {
    display: none;
  }
}

.log {
  margin-bottom: 12px;

  span {
    display: inline-block;
    font-size: 12px;
    margin-right: 8px;
  }

  .content {
    flex: 1;
    flex-wrap: wrap;
    text-align: left;
  }

  .title {
    color: #135feb;
    font-size: 12px;
    width: 80px;
    margin-right: 12px;
    text-align: left;
  }

  .time {
    font-size: 12px;
    margin-right: 16px;
  }

  .text {
    color: #9a9a9a;
    font-size: 12px;
  }
}
</style>
